<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue'
import type { StyleValue } from 'vue'

import { back } from '@/libs/common'
import { isLoading } from '@/libs/message'
import { safeArea, safeBottom } from '@/libs/config'
import { getTitle } from './data'
import { imagePath, imagePathOnly } from '@/libs/file-utils'

withDefaults(defineProps<{
  /** 页面名称 */
  name?: string
  /** 页面样式 */
  pageStyle?: StyleValue
  /** 内容样式 */
  contentStyle?: StyleValue
  /** 是否显示导航栏 */
  showTopBar?: boolean
  /** 是否显示返回按钮 */
  showBack?: boolean
  /** 导航栏名称 */
  title?: string
  /** 导航栏替代图片 */
  titleImage?: string
  /** 是否开启Canvas */
  canvas?: boolean
  /** 返回事件 */
  onBack?: () => void
}>(), {
  name: '',
  pageStyle: '',
  showTopBar: true,
  showBack: true,
})

defineEmits(['pageClick'])

const icon_back = imagePath('icon-back.svg')
const img_loading = imagePathOnly('loading.gif')

const defaultTitle = ref('')

let _top = safeArea.top
// #ifdef MP
_top = safeArea.top2 - 80
// #endif
const topBar_top = _top + 'rpx'
const back_top = _top + 50 + 'rpx'

onBeforeMount(() => defaultTitle.value = getTitle())
</script>

<template>
  <div
    class="page-wrapper"
    :style="pageStyle"
    @click="$emit('pageClick')"
  >
    <div
      v-if="showTopBar"
      class="top-bar"
      :style="{ paddingTop: topBar_top }"
    >
      <div class="nav-bar">
        <div
          v-if="showBack"
          class="back-button"
          :style="{ backgroundImage: icon_back }"
          @click="(onBack || back)()"
        ></div>
        <image
          v-if="titleImage"
          class="title-image"
          :src="titleImage"
          mode="heightFix"
        />
        <div
          v-else
          class="title"
        >{{ title || defaultTitle }}</div>
      </div>

      <slot name="top"></slot>
    </div>
    <div
      v-else-if="showBack"
      class="back-button"
      :style="{
        top: back_top,
        backgroundImage: icon_back,
        'z-index': 100
      }"
      @click="(onBack || back)()"
    ></div>

    <div class="page">
      <div
        class="content"
        :style="contentStyle"
      >
        <slot></slot>
      </div>

      <div class="footer">
        <slot
          name="footer"
          :safeBottom="safeBottom"
        ></slot>
      </div>

      <slot name="page"></slot>
    </div>

    <div
      v-if="isLoading"
      class="loading-mask"
    >
      <image
        class="icon"
        :src="img_loading"
      />
    </div>

    <TopMessage />
    <TestFlag />
  </div>

  <!-- #ifdef APP||MP-TOUTIAO -->
  <OffScreenCanvas v-if="canvas" />
  <!-- #endif -->
</template>

<style lang="less" scoped>
.page-wrapper {
  position: fixed;
  top: 0;
  left: var(--window-left);
  right: var(--window-right);
  bottom: 0;

  background-size: cover;
  background-position: center top;

  display: flex;
  flex-direction: column;

  touch-action: none;

  .top-bar {
    position: relative;
    width: 100%;

    background-color: #fff;

    .nav-bar {
      position: relative;
      width: 100%;
      height: 100rpx;

      display: flex;
      justify-content: center;
      align-items: center;

      z-index: 100;

      .title-image {
        height: 100%;

        pointer-events: none;
      }

      .title {
        max-width: 60%;

        font-size: 32rpx;
        line-height: 32rpx;
      }
    }
  }

  .back-button {
    position: absolute;
    left: 12rpx;
    top: 50%;
    transform: translateY(-50%);

    width: 64rpx;
    height: 64rpx;

    border-radius: 50%;

    background-color: #fff8;
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat;
  }

  .page {
    position: relative;
    height: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    .content {
      position: relative;
      height: 0;
      flex: 1;

      padding: 0;

      overflow-y: auto;
      touch-action: pan-y;
    }

    .footer {
      position: relative;
      width: 100%;
      flex-shrink: 0
    }
  }

  .loading-mask {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 999;

    .icon {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: 300rpx;
      height: 300rpx;

      border-radius: 16rpx;
      // background-color: rgba(#fff, .9);
    }
  }
}
</style>
